<template>
    <div class="chat-history-page">
        <h2>纠纷聊天历史查询</h2>

        <!-- 输入框获取 disputeId -->
        <div class="input-container">
            <label for="disputeId">请输入纠纷ID:</label>
            <input v-model="disputeId" type="text" id="disputeId" placeholder="请输入纠纷ID" />
            <button @click="fetchChatHistory">查询</button>
        </div>

        <!-- 纠纷聊天历史展示 -->
        <div v-if="chatHistory.length" class="chat-history">
            <h3>聊天记录</h3>
            <div v-for="(message, index) in chatHistory" :key="message.disputeMessageId" class="chat-item">
                <div><strong>发送者ID:</strong> {{ message.userId }}</div>
                <div><strong>内容:</strong> {{ message.content }}</div>
                <div><strong>发送时间:</strong> {{ formatDate(message.sentAt) }}</div>
                <div v-if="message.imageUrl"><strong>图片:</strong> <img :src="message.imageUrl" alt="聊天图片" /></div>
            </div>
        </div>

        <!-- 如果没有聊天记录 -->
        <div v-else>
            <p>没有找到相关的聊天记录。</p>
        </div>
    </div>
</template>

<script>
    // 导入接口文件
    import { fetchChatHistoryByDisputeId } from '../api/chathistory.js';

    export default {
        data() {
            return {
                disputeId: '', // 纠纷ID
                chatHistory: [], // 存放聊天记录
            };
        },
        methods: {
            // 格式化日期时间
            formatDate(timestamp) {
                const date = new Date(timestamp);
                return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            },

            // 查询聊天历史
            async fetchChatHistory() {
                if (!this.disputeId) {
                    alert('请输入有效的纠纷ID');
                    return;
                }

                try {
                    const result = await fetchChatHistoryByDisputeId(this.disputeId);
                    if (result.code === 200) {
                        this.chatHistory = result.data.disputeMessages;
                        alert('聊天记录获取成功!');
                    } else {
                        this.chatHistory = [];
                        alert(`查询失败: ${result.message || '未找到相关记录'}`);
                    }
                } catch (error) {
                    console.error('获取聊天历史失败:', error);
                    alert('查询失败，请稍后再试!');
                }
            },
        },
    };
</script>

<style scoped>
    .chat-history-page {
        padding: 20px;
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    h2 {
        font-size: 28px;
        margin-bottom: 20px;
        color: #007bff;
    }

    .input-container {
        margin-bottom: 20px;
    }

    input {
        padding: 10px;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
    }

    button {
        padding: 10px 20px;
        border: none;
        background-color: #28a745;
        color: white;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;
    }

    button:hover {
        background-color: #218838;
    }

    .chat-history {
        margin-top: 20px;
    }

    .chat-item {
        background-color: #f1f1f1;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .chat-item div {
        margin-bottom: 5px;
    }

    .chat-item img {
        max-width: 200px;
        margin-top: 10px;
    }
</style>